<template>
  <div class="form-container">
    <el-row :gutter="20">
      <el-col
        :lg="{ span: 14, offset: 5 }"
        :md="{ span: 20, offset: 2 }"
        :sm="{ span: 20, offset: 2 }"
        :xl="{ span: 14, offset: 5 }"
        :xs="24"
      >
        <el-form ref="formRef" label-width="120px" :model="form" :rules="rules">
          <el-form-item label="正常价格" prop="price">
            <el-input v-model="form.price" />
          </el-form-item>
          <el-form-item label="早鸟价">
            <el-row>
              <el-col :span="10">
                <el-date-picker
                  v-model="form.early_date"
                  placeholder="请选择早鸟日期"
                  style="width: 100%"
                  type="date"
                  value-format="YYYY-MM-DD"
                />
              </el-col>
              <el-col :span="10">
                <div style="text-align: center">之前，享受优惠价格：</div>
              </el-col>
              <el-col :span="4">
                <el-input
                  v-model="form.early_price"
                  placeholder="请输入早鸟价"
                />
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="团购价">
            <el-row>
              <el-col :span="10">
                <el-input
                  v-model="form.group_num"
                  placeholder="请输入团购人数"
                />
              </el-col>
              <el-col :span="10">
                <div style="text-align: center">人及以上，享受优惠价格：</div>
              </el-col>
              <el-col :span="4">
                <el-input
                  v-model="form.group_price"
                  placeholder="请输入团购价"
                />
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="参会权益" prop="rights">
            <el-input v-model="form.rights" type="textarea" />
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <div class="pay-button-group">
      <el-button type="primary" @click="handleSubmit">保存</el-button>
    </div>
  </div>
</template>

<script>
  import { defineComponent, getCurrentInstance, reactive, toRefs } from 'vue'
  import { doEdit, getDetail } from '@/api/fee'
  import { baseURL } from '@/config'

  export default defineComponent({
    props: {
      mettingId: {
        type: Number,
        required: true,
      },
    },
    emits: ['change-step'],
    setup(props) {
      const { proxy } = getCurrentInstance()

      const state = reactive({
        imgpath: '',
        uploadActionUrl: baseURL + 'upload/ajaxUploads',
        formRef: null,
        detail: {},
        form: {
          price: '',
          early_date: '',
          early_price: '',
          group_num: '',
          group_price: '',
          rights: '',
          metting_id: props.mettingId,
          id: '',
        },
        rules: {
          price: [
            { required: true, message: '请输入正常价格', trigger: 'blur' },
          ],
          rights: [
            { required: true, message: '请输入参会权益', trigger: 'blur' },
          ],
        },
      })
      const fetchData = async () => {
        const {
          data: { data },
        } = await getDetail({ metting_id: state.form.metting_id })
        console.log(data)
        state.detail = data
        state.form.id = data.id
        state.form.price = data.price
        state.form.early_date = data.early_date
        state.form.early_price = data.early_price
        state.form.group_num = data.group_num
        state.form.group_price = data.group_price
        state.form.rights = data.rights
      }

      const handleSubmit = () => {
        state['formRef'].validate(async (valid) => {
          if (valid) {
            const { msg } = await doEdit(state.form)
            proxy.$baseMessage(msg, 'success', 'vab-hey-message-success')
            close()
          }
        })
      }

      fetchData()
      return {
        ...toRefs(state),
        handleSubmit,
        fetchData,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .pay-button-group {
    display: block;
    margin: 20px auto;
    text-align: center;
  }
  :deep() {
    .el-upload-list {
      display: none;
    }
  }
</style>
